<template>
    <div class="home">
        <div class="contianer">
            <img class="bg"
                 src="http://evp.51job.com/2019/apc/miniapp/bg_bottom.png" />
            <div class="content">
                <img class="vote_title"
                     src="http://evp.51job.com/2019/apc/miniapp/group.png" />
                <div class="candi-list">
                    <div v-for="(item, index) in candiList"
                         :key="index"
                         class="candi-item">
                        <img class="item-photo"
                             :src="item.header"
                             @click="toDetail(item.id)"
                             mode="widthFix" />
                        <div class="item-name">{{item.name}}</div>
                        <div class="item-votes">{{item.vote}}票</div>
                        <div class="choose-btn"
                             :class="votes.indexOf(item.uid) >= 0?'chosen':''"
                             @click="choose(item.uid)">{{votes.indexOf(item.uid) >= 0?'取消选择':'选择'}}</div>
                    </div>
                    <div class="clear"></div>
                </div>
                <img class="logo-bottom"
                     src="http://evp.51job.com/2019/apc/miniapp/logo.png" />
            </div>
        </div>
        <div class="tips">
            <div class="words">
                <p>温馨提示：</p>
                <p>每位用户需选择3位候选人才能进行投票</p>
            </div>
            <div class="vote-btn"
                 :class="!selfmsg.voted&&votes.length >= 3?'btn-active':''"
                 @click="doVote">{{selfmsg.voted?'已投票':'投票'}}</div>
        </div>
        <div class="login-wrapper"
             v-show="isFace">
            <div class="modalDlg">
                <div class="form"
                     report-submit="false"
                     bindsubmit="login">
                    <div class="zh">
                        <img src="http://evp.51job.com/2019/apc/miniapp/yg.png"
                             class="img">
                        <div class="shuru">
                            <input type="text"
                                   name="num"
                                   v-model="number"
                                   placeholder="请输入工号(CN大写)" />
                        </div>
                    </div>
                    <div class="xm">
                        <img src="http://evp.51job.com/2019/apc/miniapp/xm.png"
                             class="img">
                        <div class="shuru">
                            <input type="text"
                                   name="name"
                                   v-model="name"
                                   placeholder="请输入姓名" />
                        </div>
                    </div>
                    <div @click="login"
                         class="btn">登录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "home",
    data() {
        return {
            candiList: [],
            // candiList: this.globalData.list,
            selfmsg: this.globalData.self,
            vote: {}, //选择信息 对象
            votes: this.globalData.self.votes,
            voting: true, // 是否正在投票/加载数据
            isFace: true,
            name: "",
            number: ""
        };
    },
    methods: {
        doVote() {
            if (this.voting || this.globalData.self.voted) return;
            this.voting = true;

            if (this.votes.length === 3) {
                console.log(this.globalData.self.votes, "去投票");
                // 调投票接口
                var idstr = "";
                this.globalData.self.votes.map(item => {
                    idstr += item + ",";
                });
                idstr = idstr.slice(0, -1);

                // 提交
                var form = new FormData();
                form.append("number", this.selfmsg.number);
                form.append("idstr", idstr);
                this.$http.post(`${this.baseUrl}votes`, form).then(res => {
                    console.log(res.data);
                    if (res.data.status == 200) {
                        this.selfmsg.voted = true;
                        // 存cookie保存状态
                        let selfstr = JSON.stringify(this.selfmsg);
                        console.log(selfstr);
                        this.$cookie.setCookie("self", selfstr, 1);
                        // 跳转
                        this.$router.push("/lottery");
                    }
                });
            } else {
                console.log("不能投票");
            }
        },
        shuffle(arr) {
            for (let i = 0; i < arr.length; i++) {
                const randomIndex =
                    Math.round(Math.random() * (arr.length - 1 - i)) + i;
                [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
            }
            return arr;
        },
        toDetail(id) {
            this.$router.push("/detail/" + id);
        },
        choose(uid) {
            let id = uid;
            let count = 0;

            if (this.votes.indexOf(id) >= 0) {
                // 已选
                this.votes.splice(this.votes.indexOf(id), 1);
            } else {
                // 未选
                if (this.votes.length >= 3) {
                    alert("每位用户只能选择3位候选人");
                } else {
                    this.votes.push(id);
                }
            }
            // console.log(this.globalData.self.votes);
        },
        login() {
            let form = new FormData();
            form.append("name", this.name);
            form.append("number", this.number);
            this.$http.post(`${this.baseUrl}login`, form).then(res => {
                if (res.data.status === 1) {
                    // 登录成功
                    this.isFace = false;
                    // 获取状态
                    this.globalData.self.number = this.number;
                    this.globalData.self.name = this.name;

                    this.globalData.voted = res.data.voted;
                    let votes = res.data.votes.split(",");
                    if (votes.length > 0 && votes[0].length > 0)
                        votes.map(item => {
                            this.globalData.self.votes.push(item);
                        });
                    console.log(this.globalData);
                    // 保存cookie
                    this.$cookie.setCookie("name", this.name, 1);
                    this.$cookie.setCookie("number", this.number, 1);
                } else {
                    alert("登录失败，请检查工号及姓名是否输入错误");
                }
            });
        }
    },
    created() {
        this.$http.get(`${this.baseUrl}apawards`).then(res => {
            // console.log(res);
            this.candiList = this.shuffle(res.data);
            this.globalData.list = this.candiList;
            // 同步个人数据
            // 同步完成后设置voting 为 false状态
            this.voting = false;
        });

        let number = this.$cookie.getCookie("number");
        let name = this.$cookie.getCookie("name");

        let self = this.$cookie.getCookie("self");
        if (self) {
            let self_json = JSON.parse(self);
            this.isFace = false;
            this.globalData.self.number = self_json.number;
            this.globalData.self.voted = self_json.voted;
            self_json.votes.map(item => {
                this.globalData.self.votes.push(item);
            });
        } else if (number && name) {
            this.number = number;
            this.name = name;
            this.isFace = false;
            this.login();
        }
    }
};
</script>

<style lang="scss" scoped>
.home {
    font-size: 0;
    line-height: 1;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;

    .title {
        text-align: center;
        font-size: 0.5rem;
        font-weight: bold;
        color: #01114b;
        padding-top: 0.39rem;
    }

    .tab {
        float: left;
        width: 25%;
        text-align: center;
        padding: 0.1rem 0;
        margin-top: 0.5rem;
    }

    .topTabSwiper {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        zoom: 1;
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 9999;
        background: #01114c;
        color: #fff;
        height: 0.5rem;
    }

    .topTabSwiper:after {
        content: "";
        clear: both;
        display: block;
    }

    .tabBorer {
        color: #fff;
        background: #4b577d;
        border-radius: 0.25rem;
        margin-top: 0.05rem;
    }

    .swiper {
        width: 100%;
    }

    .swiper_con {
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .btn-area {
        display: flex;
        border-top: 0.02rem solid #ccc;
        border-bottom: 0.02rem solid #ccc;
        zoom: 1;
        position: fixed;
        bottom: -0.08rem;
        width: 100%;
        z-index: 9999;
        background: #01114c;
        color: #fff;
        height: 1rem;
    }

    .btn-na {
        width: 25%;
        text-align: center;
        padding: 0.1rem 0;
        margin-top: 0.05rem;
    }

    .active {
        width: 1.86rem;
        height: 0.72rem;
        background: #526684;
        border-radius: 0.18rem;
        text-align: center;
        color: #fff;
        margin-top: 0.1rem;
        font-size: 0.28rem;
        line-height: 0.72rem;
    }
    .bg {
        position: fixed;
        bottom: 0.88rem;
        width: 100%;
        z-index: -1;
    }
    .content {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        font-size: 0.28rem;
        margin-bottom: 1rem;
    }

    .logo-bottom {
        width: 2.02rem;
        height: 0.2rem;
        margin-top: 0.6rem;
        margin-bottom: 0.4rem;
    }

    /* .content image{
        margin-top: 30%;
    } */

    .contianer .content .wxParse-p image {
        width: 100% !important;
    }

    .vote_title {
        width: 4.96rem;
        height: 0.86rem;
        margin-top: 0.56rem;
    }

    .candi-list {
    }

    .clear {
        clear: both;
    }

    .candi-item {
        height: 5.66rem;
        width: 3.3rem;
        border: 1px solid rgba(179, 184, 201, 1);
        margin-top: 0.26rem;
        position: relative;
    }

    .candi-item:nth-child(odd) {
        float: left;
        margin-left: 0.32rem;
    }

    .candi-item:nth-child(even) {
        float: right;
        margin-right: 0.32rem;
    }

    .candi-item .item-photo {
        width: 2.9rem;
        height: 3.86rem;
        margin-top: 0.2rem;
        vertical-align: top;
    }

    .candi-item .item-name {
        font-size: 0.28rem;
        float: left;
        color: rgba(9, 38, 81, 1);
        margin-top: 0.2rem;
        margin-left: 0.2rem;
    }

    .candi-item .item-votes {
        font-size: 0.28rem;
        float: right;
        color: rgba(9, 38, 81, 1);
        margin-top: 0.2rem;
        margin-right: 0.2rem;
    }

    .candi-item .choose-btn {
        width: 2.9rem;
        height: 0.6rem;
        color: white;
        background: rgba(9, 38, 81, 1);
        border-radius: 0.3rem;
        position: absolute;
        bottom: 0.2rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        line-height: 0.6rem;
    }

    .candi-item .chosen {
        width: 2.9rem;
        height: 0.6rem;
        line-height: 0.56rem;
        border-radius: 0.3rem;
        border: 2px solid rgba(9, 38, 81, 1);
        background: white;
        color: rgba(9, 38, 81, 1);
        box-sizing: border-box;
    }

    .tips {
        position: fixed;
        bottom: 0rem;
        width: 7.5rem;
        height: 0.88rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -0.08rem 0.32rem 0px rgba(9, 38, 81, 0.15);
        display: flex;
        /* padding-right: 26rem; */
        justify-content: space-between;
    }

    .tips .words {
        margin: 0.18rem 0 0 0.26rem;
    }

    .tips p {
        font-size: 0.22rem;
        color: rgba(153, 153, 153, 1);
        display: inline-block;
        vertical-align: top;
        text-align: left;
    }

    .tips p:nth-child(2) {
        width: 2.56rem;
    }

    .tips .vote-btn {
        width: 2.4rem;
        height: 0.64rem;
        background: rgba(204, 204, 204, 1);
        border-radius: 0.32rem;
        margin: 0.12rem 0.32rem 0 0;
        color: white;
        font-size: 0.28rem;
        text-align: center;
        line-height: 0.64rem;
        /* float: right; */
    }

    .tips .btn-active {
        background: rgba(9, 38, 81, 1);
    }

    .login-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 100;
        background: rgba(0, 0, 0, 0.7);
    }

    .modalDlg {
        width: 5.8rem;
        height: 6.2rem;
        position: fixed;
        top: 50%;
        left: 0;
        z-index: 9999;
        margin: -3.7rem 0.85rem;
        background-color: #fff;
        border-radius: 0.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        .form {
            margin: 0;
        }
    }
    .zh,
    .xm {
        display: flex;
        height: 1rem;
        margin-top: 0.6rem;
        border-bottom: 1px solid #ccc;
        align-items: center;
    }

    .shuru {
        line-height: 0.5rem;
    }

    .shuru input {
        margin-top: 0.3rem;
        width: 3.48rem;
        height: 0.4rem;
        font-size: 0.28rem;
        color: rgba(9, 38, 81, 1);
        line-height: 0.4rem;
        padding-left: 0.4rem;
        border: none;
        outline: none;
    }

    .zhanaghao {
        line-height: 1.2rem;
    }

    .xingming {
        line-height: 1.2rem;
    }

    .img {
        width: 0.4rem;
        height: 0.36rem;
        margin-top: 0.2rem;
    }

    .xingming-s input {
        margin-top: 0.15rem;
        width: 1.74rem;
        height: 0.2rem;
        font-size: 0.14rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(9, 38, 81, 1);
        line-height: 0.2rem;
        padding-left: 0.2rem;
    }

    .btn {
        margin: 0.9rem auto 0;
        width: 2.86rem;
        height: 0.88rem;
        border-radius: 0.44rem;
        opacity: 0.9;
        border: 1px solid rgba(9, 38, 81, 1);
        color: rgba(9, 38, 81, 1);
        font-size: 0.36rem;
        line-height: 0.88rem;
        text-align: center;
    }
}
</style>
